import React from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom'

export default function Home() {
  // 接收param传参
  const {name, age} = useParams() 

  // 接收search传参
  const [searchParam, setSearchParam] = useSearchParams()

  // 接收 state传参
  const {state} = useLocation()
  console.log(Object.fromEntries(searchParam))
  return (
    <div>
      <h1>Home</h1>
      <button onClick={() => setSearchParam({name: '周', age: '16'})}>改变searchParam</button>
      <h3>param传参:{name}, {age}</h3>
      <h3>query传参:{name}, {age}</h3>
      <h3>state传参:{state.name}, {state.age}</h3>
      
    </div>
  )
}
